import React from 'react'
import { Checkbox, Modal, Tag } from 'antd'

const EditTagModal = ({tagModalVisible, currentSelectedTagIds, userTags, handleSubmitEdit, handleCancelEdit, handleSelectTagChange}) => {
  return <Modal
    title='Tags'
    centered
    width={500}
    visible={tagModalVisible}
    onOk={handleSubmitEdit}
    onCancel={handleCancelEdit}>
    <Checkbox.Group
      value={currentSelectedTagIds}
      onChange={handleSelectTagChange}>
      {userTags.map((item, index) =>
        <span key={index} className='margin-l-2 margin-t-2' style={{display: 'inline-block'}}>
          <Checkbox value={item.id}>
            <Tag key={index}
              color={item.color === 'default' ? '' : item.color}>
              {item.name}
            </Tag>
          </Checkbox>
        </span>
      )}
    </Checkbox.Group>
  </Modal>
}

export default EditTagModal
